@import url(../less/base.less);
@import url(../less/normalize.less);

@rootsize:37.5rem;

body{
  background-color: #fdfdfd;
  margin: 0 (15 / @rootsize);
}


// 头部区域
.header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: (46 / @rootsize);
  h4{
    font-size: (14 / @rootsize);
    font-weight: 400;
    margin-right: (20 / @rootsize);
  }
  label{
    position: relative;
    img{
      position: absolute;
      top: (10 / @rootsize);
      left: (13 / @rootsize);
      height: (15 / @rootsize);
    }
    input{
      width: (245 / @rootsize);
      height: (32 / @rootsize);
      border-radius: (16 / @rootsize);
      margin-right: (26 / @rootsize);
      background-color: #f7f7f7;
      border: 1px solid #ccc;
      
      &::placeholder{
        padding-left: (38 / @rootsize);
        font-size: (15 / @rootsize);
      }
    }
  }
  span{
    img{
      height: (25 / @rootsize);
    }
  }
  
}
// 头部区域


// 轮播图
.banner{
  margin-top: (13 / @rootsize);
  margin-bottom: (8 / @rootsize);
}
.banner_dian{
  ul{
    display:flex ;
    justify-content: center;
    li{
      width: (10 / @rootsize);
      height: (3 / @rootsize);
      background-color: #ccc;
      border-radius: (1.5 / @rootsize);
      margin-right: (8 / @rootsize);
      .active{
        color: #000;
      }
    }
  }
}
// 轮播图


// nav区域
.nav{
  display: flex;
  justify-content: space-between;
  margin-top: (12 / @rootsize);
  .left{
    
    img{
      margin-left: (10 / @rootsize);
        // height: 70px;
    }
    // .right{
    //   img{
    //     // height: 70px;
    //   }
    // }
  }
}
// nav区域


// 超值优惠区域
.title{
  display: flex;
  justify-content: space-between;
  margin-top: (36 / @rootsize);
  margin-bottom: (20 / @rootsize);
  h3{
    font-size: (18 / @rootsize);
  }
  a{
    img{
      width: (10 / @rootsize);
      height: (15 / @rootsize);
      line-height: (15 / @rootsize);
    }
  }
}

.content{
  display: flex;
  justify-content: space-between;
  .left{
    img{
      width: (170 / @rootsize);
      height: (120 / @rootsize);   
    }
    h4{
      font-weight: 600;
      margin-top: (12 / @rootsize);
      font-size: (13 / @rootsize);
    }
    span{
      margin-top:(8 / @rootsize);
      font-size: (11 / @rootsize);
      color: #999;
    }
    p{
      margin-top: (12 / @rootsize);
      font-size: (11 / @rootsize);
      color: #f39800;
    }
  }
}
// 超值优惠区域


// 广告招募区域
.van{
  margin-top: (30 / @rootsize);
  img{
    height: (56 / @rootsize);
  }
}
// 广告招募区域


// 为您推荐区域
.main{
  display: flex;
  justify-content: space-between;
  margin-top: (36 / @rootsize);
  margin-bottom: (24 / @rootsize);
  .left{
    h4{
      font-size: (18 / @rootsize);
    }
  }
  .right{
    display: flex;
    .zheng{
      font-size: (14 / @rootsize);
      font-weight: 600;
      color: #3a3939;
      margin-right: (17 / @rootsize);
      border-bottom: 3px solid #14a2ee;
    }
    .he{
      font-size: (14 / @rootsize);
      color: #999;
      margin-right: (16 / @rootsize);
    }      
  }
}
.hot{
  display: flex;
  justify-content: space-between;
  margin-bottom: (18 / @rootsize);
  
  .left{
    img{
      width: (120 / @rootsize);
      height: (80 / @rootsize);
    }
  }
  .right{
    margin-left: (16 / @rootsize);
    h4{
      font-size: (15 / @rootsize);
    }
    p{
      font-size: (12 / @rootsize);
      margin-top: (8 / @rootsize);
      color: #9f9f9f;
    }
    span{
      font-size: (13 / @rootsize);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: (8 / @rootsize);
      color: #9f9f9f;
    }
    .zu{
      display: flex;
      a{
        display: block;
        width: (45 / @rootsize);
        height: (16 / @rootsize);
        font-size: (12 / @rootsize);
        border: 1px solid #ccc;
        color: #999;
        text-align: center;
        line-height: (16 / @rootsize);
        margin-right: (10 / @rootsize);
        border-radius: (3 / @rootsize);
        margin-top: (8 / @rootsize);
      }
    }
    .pay{
      color: #f39800;
    }
  }
}
// 为您推荐区域


// 查看更多优质房源
.home{
  margin: (24 / @rootsize) (45 / @rootsize);
  a{
    display: block;
    width: (260 / @rootsize);
    height: (38 / @rootsize);
    border: 1px solid #ccc;
    font-size:(12 / @rootsize);
    text-align: center;
    line-height: (38 / @rootsize);
    border-radius: (19 / @rootsize);
    color: #999;
    background-color: #f2f2f3;
  }
}
// 查看更多优质房源


// 品牌故事入口
.story{
  margin-bottom:(62 / @rootsize) ;
}
// 品牌故事入口


// 底部区域
.footer{
  margin-top:(12 / @rootsize) ;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: (50 / @rootsize);
  z-index: 9999;
  background-color: #fff;
  ul{
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
   li{
    text-align: center;
    a{
      color: #999;
      span{
        font-size: (18 / @rootsize);   
      }
      p{
        font-size: (12 / @rootsize);
        margin-top: (5 / @rootsize);
      }
    }
    .active{
      color: #000;
    }
   }
  }
}
// 底部区域